<template>
  <a-layout class="main">
    <Header />
    <a-layout class="container">
      <Left />
      <Content />
      <Right />
    </a-layout>
  </a-layout>
</template>
<script setup>
import { onMounted } from "vue";
import Header from "@/form/design-mode/components/header/index.vue";
import Content from "@/form/design-mode/components/content/index.vue";
import Left from "@/form/design-mode/components/left/index.vue";
import Right from "@/form/design-mode/components/right/index.vue";
import { useFormStore } from "@/form/design-mode/store/formStore";
import { queryFormData } from "@/mockData/form";
const formStore = useFormStore();
onMounted(() => {
  const data = queryFormData();
  formStore.initData(data);
});
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.container {
  width: 100%;
  flex: 1;
  padding-top: 16px;
  display: flex;
  flex-direction: row;
  background-color: #f5f6f7;
  gap: 16px;
}
</style>
